<template>
  <div class="home">
    <el-row type="flex" class="row-bg" justify="space-around">
      <el-col :span="4">
        <div class="grid-content bg-purple" @click="goToPlan">
          <el-row type="flex" class="row-bg" justify="center">
            <img src="../assets/orderplan.svg" />
          </el-row>
          <el-row type="flex" justify="center">
            订单计划
          </el-row>
  
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple" @click="goToBoard">
          <el-row type="flex" class="row-bg" justify="center">
            <img src="../assets/dashboard.svg" />
          </el-row>
          <el-row type="flex" justify="center">
            生产看板
          </el-row>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple" @click="goToQA">
          <el-row type="flex" class="row-bg" justify="center">
            <img src="../assets/qa.svg" />
          </el-row>
          <el-row type="flex" justify="center">
            质检管理
          </el-row>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple" @click="goToPlan">
          <el-row type="flex" class="row-bg" justify="center">
            <img src="../assets/knowledge.svg" />
          </el-row>
          <el-row type="flex" justify="center">
            知识库
          </el-row>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple" @click="goToSetting">
          <el-row type="flex" class="row-bg" justify="center">
            <img src="../assets/knowledge.svg" />
          </el-row>
          <el-row type="flex" justify="center">
            设定
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import Router from 'vue-router'
  var router = new Router()
  
  export default {
    name: 'Home',
    methods: {
      goToPlan: function() {
        this.$router.push({
          path: 'workspace/plan'
        })
      },
      goToBoard: function() {
        this.$router.push({
          path: 'workspace/board'
        })
      },
      goToQA: function() {
        this.$router.push({
          path: 'workspace/qa'
        })
      },
      goToSetting: function() {
        this.$router.push({
          path: 'workspace/setting'
        })
      }
    },
    data() {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  a {
    text-decoration: none;
    text: #ffffff;
  }
  
  .router-link-active {
    text-decoration: none;
  }
  
  .row-bg {
    margin-top: 100px;
  }
  
/*   .bg-purple {
    background-color: transparent;
    text: #ffffff;
  } */
  
  .grid-content {
    border-radius: 4px;
    min-height: 100px;
  }
</style>
